import React from 'react'
// ===================================================================== Temp
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $Lazy } = window
// ===================================================================== private template
const Page = $Lazy.load(()=>import('#tp/page/page-container'))
const Tabs = $Lazy.load(()=>import('#tp/tabs/tabs'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		index:0,
		pages: [
			{ component:$Lazy.state(()=>import('./cpt/a')) },
			{ component:$Lazy.load(()=>import('./cpt/b')) },
		]
	}
	
	componentDidMount(){
		const { pages, index } = this.state
		pages[index].first = true
		this.setState({ pages })
	}
	
	tabs = [
		{ title:'正在使用', 	status:0 },
		{ title:'使用记录', 		status:1 },
	]
	
	controls = () => [
		this.state.index === 0 ? Controls.click.call(this,'领取', ()=> this['ref0'].open()) : null
	]
	
	render(){
		const { index, pages } = this.state
		return (
			<Page>
				{/* 选项卡 */}
				<Tabs
					data={ this.tabs }
					onTabs = { (data, index) => {
						pages[+index].first = true
						this.setState({ index:+index, pages })
					}}
					controls = { this.controls() }
				/>
				{
					pages.map((v,i)=> v.first && <div className='ex rel fv' key={i} style={{ display: +index === i && v.first ? 'flex' : 'none' }}><v.component onRef={ref=>{this['ref'+i] = ref}} /></div>)
				}
			</Page>
		)
	}
}

export default Index